<template>
	<div class="article" @click="updateTitle('test')" v-link="{'name': 'articles', params: {type: article.type}}">
		<div class="flex1">
			<span @click="updateTitle('test')">{{article.title}}</span>
		</div>
		<div>
			<img :src="'/static/img/'+article.img">
		</div>
		<div class="flex2">
			<span>{{article.focusCount}} 关注</span>
			<span>{{article.articleCount}} 文章</span>
		</div>
	</div>
</template>
<script>
	import {updateTitle} from './../../vuex/action'

	export default {
		props: ['article'],
		computed: {
		},
		vuex: {
			actions: {
				updateTitle
			}
		}
	}
</script>
<style scoped>
	.article {
		width: 50%;
		display: inline-block;
		padding: 5px;
		text-align: center;
	}
	img {
		width: 100%;
		/*transform:rotate(-90deg);*/
	}
	.flex1, .flex2 {
		display: flex;
	}
	.flex1>span{
		flex: 1;
		font-size: 1.7rem;
		font-weight: 800;
		line-height: 2rem;
	}
	.flex2>span {
		flex: 2;
	}
	.article>div{
		margin: 5px 0;
	}
</style>